import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { visualizer } from 'rollup-plugin-visualizer'
import viteCompression from 'vite-plugin-compression'
import pxtovw from 'postcss-px-to-viewport-8-plugin'
import AutoImport from 'unplugin-auto-import/vite'
import AntdResolver from 'unplugin-auto-import-antd'

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production'

  return {
    plugins: [
      react(),
      AutoImport({
        // target to transform
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        ],
        imports: [
          'react',
          'react-router-dom',
          'ahooks'
        ],
        resolvers: [AntdResolver()],
        // （可选）生成自动导入的声明文件，方便调试
        dts: 'src/auto-imports.d.ts',
      }),
      // 构建分析插件，仅在生产环境启用
      isProduction && visualizer({
        open: true,
        filename: 'dist/stats.html',
        gzipSize: true,
        brotliSize: true,
      }),
      // ​​启用压缩插件,在构建时预生成 Gzip 和 Brotli 文件，
      // 由服务器根据浏览器支持情况返回最合适的压缩格式，能额外减少 40%-60% 的传输体积
      isProduction && viteCompression({ algorithm: 'gzip' }),
      isProduction && viteCompression({ algorithm: 'brotliCompress' }),
    ].filter(Boolean),
    css: {
      preprocessorOptions: {
        less: {
          additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`,
          javascriptEnabled: true // 按需引入antd样式
        }
      },
      postcss: {
        plugins: [
          pxtovw({
            unitToConvert: 'px',       // 需要转换的单位（默认 px）
            viewportWidth: (file) => { // 动态设置设计稿宽度（根据文件路径）
              if (file.includes('pc')) return 1920; // PC 端设计稿
              if (file.includes('mobile')) return 750; // 移动端设计稿
              return 375; // 默认值（移动端 H5）
            },
            unitPrecision: 5,          // 转换后保留的小数位数
            propList: ['*'],           // 需要转换的 CSS 属性（* 表示全部）
            viewportUnit: 'vw',        // 目标单位（vw/vh）
            fontViewportUnit: 'vw',    // 字体使用的视口单位
            minPixelValue: 1,          // 最小转换像素值（小于等于 1px 不转换）
            mediaQuery: true,          // 是否转换媒体查询中的 px
            replace: true,             // 直接替换原值，不添加备用属性
            exclude: [                 // 排除第三方库（如 ant-design、vant）
              /node_modules\/(ant-design|vant|element-plus)\//,
            ],
            landscape: false,          // 是否处理横屏
            landscapeUnit: 'vw',       // 横屏单位
            landscapeWidth: 1334       // 横屏设计稿宽度
          })
        ]
      }
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'), // 设置路径别名
      },
      // 可以明确指定 Vite 尝试解析的文件扩展名
      extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
    },
    build: {
      outDir: 'dist',
      sourcemap: false, // 生产环境可关闭 sourcemap
      chunkSizeWarningLimit: 1000, // 将 chunk 大小警告阈值提升至 1MB
      rollupOptions: {
        output: {
          // 精细化分包策略
          manualChunks(id) {
            if (id.includes('node_modules')) {
              // 1. 将庞大的 ArcGIS 核心库单独分包
              if (id.includes('@geoscene/core')) {
                return 'vendor-geoscene'
              }
              // // 2. 将 ArcGIS 的组件和 Calcite 样式库单独分包
              // if (id.includes('@arcgis/map-components') || id.includes('@esri/calcite-components')) {
              //   return 'vendor-arcgis-ui'
              // }
              // 3. React 及其相关库单独分包
              if (id.includes('react') || id.includes('scheduler')) {
                return 'vendor-react'
              }
              // 4. 路由库单独分包
              if (id.includes('react-router')) {
                return 'vendor-router'
              }
              // 5. 其余第三方库打入通用 vendor 包
              return 'vendor'
            }
          },
          // 优化输出文件命名规则
          chunkFileNames: 'static/js/[name]-[hash:8].js',
          entryFileNames: 'static/js/[name]-[hash:8].js',
          // 静态资源分类存放
          assetFileNames: (assetInfo) => {
            const extType = assetInfo?.name?.split('.').pop() || ''
            if (/(png|jpe?g|gif|svg|webp|ico)$/i.test(extType)) {
              return 'static/img/[name]-[hash:8][extname]'
            }
            if (/(woff2?|eot|ttf|otf)$/i.test(extType)) {
              return 'static/fonts/[name]-[hash:8][extname]'
            }
            if (extType === 'css') {
              return 'static/css/[name]-[hash:8][extname]'
            }
            return 'static/assets/[name]-[hash:8][extname]'
          }
        }
      }
    },
    server: {
      open: true,
      proxy: {
        // 代理魔方平台接口
        '/hap/api': {
          target: 'https://dia.szsszjzx.cn',
          changeOrigin: true,
          secure: false, // 如果是 HTTPS 且证书有问题
          rewrite: (path) => path.replace(/^\/hap/, '')
        },
        // 代理所有以 /artemis 开头的请求
        '/hik_camera/artemis': {
          target: 'https://191.244.13.50',
          changeOrigin: true,
          secure: false, // 如果是 HTTPS 且证书有问题
          rewrite: (path) => path.replace(/^\/hik_camera/, '')
        }
      }
    },
  }
})
